import { defineComponent, watch, ref, onMounted, toRefs } from 'vue'
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    const { xdata, data1, data2 } = toRefs(props.cdata.value)

    // 配置项
    let colorData = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: 'rgba(41, 215, 227, 1)'
      },
      {
        offset: 1,
        color: 'rgba(0, 85, 255, 0)'
      }
    ])

    let options = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(8,45,74,0.85)',
        borderColor: 'rgb(140,255,74)', //设置边框颜色
        padding: 12,
        axisPointer: {
          type: 'shadow'
        },
        textStyle: {
          fontSize: 40,
          color: '#fff'
        },
        formatter: (params) => {
          let arr = [...params]
          let str = ''
          arr.forEach((item, index) => {
            if (item.componentSubType == 'line') {
              str +=
                '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                item.color +
                ';"></span>' +
                item.seriesName +
                '  ' +
                item.data +
                '%' +
                '<br />'
            } else {
              str +=
                '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                'rgba(41, 215, 227, 1)' +
                ';"></span>' +
                item.seriesName +
                '  ' +
                item.data +
                '<br />'
            }
          })
          str = arr[0].name + '<br />' + str
          return str
        }
      },
      legend: {
        // data: ["能源消费总量", "能耗强度"],
        top: '10%',
        textStyle: {
          fontSize: 40,
          color: '#fff',
          padding: [0, 8]
        }
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: 200,
        padding: '0 0 10 0',
        containLabel: true
      },
      xAxis: {
        data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
        triggerEvent: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: true,
          // interval: information.area.length,
          lineStyle: {
            color: 'rgba(180, 228, 255, 0.1)',
            width: 2
          }
        },
        axisLabel: {
          show: true,
          rotate: 0,
          interval: 0,
          textStyle: {
            padding: [14, 0, 0, 0],
            fontSize: 40,
            color: '#fff'
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '亿吨',
          nameTextStyle: {
            color: '#fff',
            fontSize: 40,
            padding: [0, 0, 60, -20]
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 40
            }
          }
        },
        {
          type: 'value',
          name: '%',
          nameTextStyle: {
            color: '#fff',
            fontSize: 40,
            padding: [0, 0, 40, 40]
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 40
            }
          }
        }
      ],
      series: [
        {
          name: '发电量',
          // barMinHeight: 10,
          type: 'bar',
          barWidth: '18%',
          itemStyle: {
            normal: {
              borderRadius: [12, 12, 0, 0],
              borderColor: colorData,
              borderWidth: 5,
              //渐变色
              // color: colorData
              color: function (params) {
                return params.name == '2024' ? 'rgba(20, 157, 220, 0)' : colorData // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
              }
            }
          },
          data: [35, 38, 40, 42, 44, 42, 46, 48.57]
          // z: 10,
        },
        {
          name: '增速',
          type: 'line',
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          // smooth: true, //平滑曲线显示
          showAllSymbol: true, //显示所有图形。
          symbol: 'circle', //标记的图形为实心圆
          symbolSize: 20, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: 'rgba(255, 195, 0, 1)',
            borderColor: '#fff',
            borderWidth: 5
          },
          lineStyle: {
            color: 'rgba(255, 195, 0, 1)',
            width: 5
          },
          data: [2.2, -1.2, 2.5, 3.3, -2.2, 3.4, 2.8, 3.4]
        }
        // {
        //   name: "hill",
        //   type: "bar",
        //   barWidth: "20%",
        //   symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
        //   itemStyle: {
        //     normal: {
        //       color: "rgba(11,47,68,.2)",
        //     },
        //   },
        //   data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
        //   z: 9,
        // },
      ]
    }
    onMounted(() => {
      if (chartRef.value) {
        chartRef.value.initChart(options)
      }
    })

    return () => {
      const height = '100%'
      const width = '100%'
      return <echart ref={chartRef} height={height} width={width} />
    }
  }
})
